<template>
    <!-- 客户收入统计 -->
    <div class="revenue">
        <div v-for="(item, index) in chartData" :key="index" class="unreconciled-item" :class="{ isScreen: isScreen }">
            <div class="left-con">
                <span class="ind" style="margin-right: 8px;">{{ index + 1 }}</span>
                <span class="name">{{ item.customer_id_name }}</span>
            </div>
            <div class="right-num">
                <el-statistic class="val" group-separator="," :precision="2" :value="item.total_freight * 1"></el-statistic>
                <span class="unit">元</span>
            </div>
        </div>
    </div>
</template>

<script>
import { getChartData } from "@/api/echarts";

export default {
    name: 'revenue',
    components: {},
    props: ['origin'],
    data() {
        return {
            chartData: []
        };
    },
    computed: {
        isScreen() {
            return this.origin === 'screen';
        }
    },
    mounted() {
        getChartData(
            { "custom_chart_id": "39" }
        ).then(res => {
            this.chartData = (res.data.data || []).splice(0, 10);
        });
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
.wrapper {}

.revenue {
    width: 100%;
    overflow: hidden;

}

.unreconciled-item {
    display: flex;
    justify-content: space-between;
    color: #323232;
    font-size: 14px;
    // font-weight: bold;
    line-height: 30px;

    .left-con {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
    }

    .right-num {
        display: flex;
        width: 120px;
        justify-content: flex-end;
    }

    .ind {
        background-image: linear-gradient(to right, rgb(157, 191, 239), rgb(70, 109, 236));
        color: transparent;
        -webkit-background-clip: text;
        font-style: italic;
        color: rgb(64, 158, 255);
        font-size: 13px;
        font-weight: bold;
    }

    .val {
        margin-right: 3px;
        font-weight: bold;

        /deep/.con {
            justify-content: flex-end;
        }

        /deep/.con .number {
            font-size: 14px;
            line-height: 30px;
        }
    }

    .unit {
        color: #555;
        font-size: 12px;
    }

    &.isScreen {

        .name,
        .unit {
            color: #4c9bfd !important;
        }

        /deep/.right-num .val .con .number {
            color: #fff !important;
        }
    }
}</style>